<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>理解MVVM</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    MVVM模型
                1. M：模型(Model) ：data中的数据
                2. V：视图(View) ：模板代码
                3. VM：视图模型(ViewModel)：Vue实例
    观察发现：
                1.data中所有的属性，最后都出现在了vm身上。
                2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
-->
<!-- 准备好一个容器-->
<div id="root">
    <h4>name：{{name}}</h4>
    <hr/>
    <h4>address：{{address}}</h4>
    <hr/>
    <h4>_uid：{{_uid}}</h4>
    <hr/>
    <h4>1+1：{{1 + 1}}</h4>
    <hr/>
    <h4>$options：{{$options}}</h4>
    <hr/>
    <h4>$emit：{{$emit}}</h4>
    <hr/>
    <h4>_c：{{_c}}</h4>
    <hr/>
</div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: '向妙',
            address: '湖南',
        }
    })
    console.log(vm)
</script>
</html>